 /* icon */
.rui-icon {
  display: inline-block;
  height: 1em;
  width: 1em;
  font-size: 20px;
  box-sizing: border-box;
  text-indent: -9999px;
  vertical-align: middle;
  position: relative;
}
.rui-icon::before,
.rui-icon::after {
  content: '';
  box-sizing: inherit;
  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.rui-icon-check::before {
  border-style: solid;
  border-width: 0 0 2px 2px;
  height: .5em;
  width: .9em;
  -ms-transform: translate(-50%, -.375em) rotate(-45deg);
  transform: translate(-50%, -.375em) rotate(-45deg);
  z-index: 10;
}

.rui-icon-check:after {
  content: '';
  display: block;
  background-color: #e24c4e;
  width: calc(120vw / 7.5);
  height: calc(120vw / 7.5);
  border-radius: 50%;
  position: absolute;
  z-index: 0;
}
 /* icon */
.rui-icon-arrow-right::before {
  height: .65em;
  width: .65em;
  border-style: solid;
  border-width: 1px 0 0 1px;
  -ms-transform: translate(-75%, -50%) rotate(135deg);
  transform: translate(-75%, -50%) rotate(135deg);
}

.rui-icon-arrow-left::before {
  height: .65em;
  width: .65em;
  border-style: solid;
  border-width: 1px 0 0 1px;
  -ms-transform: translate(-25%, -50%) rotate(-45deg);
  transform: translate(-25%, -50%) rotate(-45deg);
}
.rui-icon-arrow-left2::before {
  height: .65em;
  width: .65em;
  border-style: solid;
  border-width: 2px 0 0 2px;
  -ms-transform: translate(-25%, -50%) rotate(-45deg);
  transform: translate(-25%, -50%) rotate(-45deg);
}
.rui-icon-arrow-up::before {
  height: .65em;
  width: .65em;
  border-style: solid;
  border-width: 1px 0 0 1px;
  -ms-transform: translate(-50%, -25%) rotate(45deg);
  transform: translate(-50%, -25%) rotate(45deg);
}

.rui-icon-arrow-down::before {
  height: .65em;
  width: .65em;
  border-style: solid;
  border-width: 1px 0 0 1px;
  -ms-transform: translate(-50%, -75%) rotate(225deg);
  transform: translate(-50%, -75%) rotate(225deg);
}

.rui-icon-caret::before {
  border: .3em solid transparent;
  border-top-color: currentColor;
  -ms-transform: translate(-50%, -25%);
  transform: translate(-50%, -25%);
}
.rui-icon-caret-left::before {
  border: .3em solid transparent;
  border-left-color: currentColor;
  -ms-transform: translate(-25%, -50%);
  transform: translate(-25%, -50%);
}


.rui-icon-close::before {
  width: 90%;
  border-top: 1px solid;
  -ms-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.rui-icon-close::after {
  height: 90%;
  border-left: 1px solid;
  -ms-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.rui-icon-search::before {
  width: .75em;
  height: .75em;
  border: 1px solid;
  border-radius: 50%;
  left: 5%;
  top: 5%;
  -ms-transform: translate(0, 0) rotate(45deg);
  transform: translate(0, 0) rotate(45deg);
}

.rui-icon-search::after {
  width: .4em;
  border-top: 2px solid;
  left: 80%;
  top: 80%;
  -ms-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.rui-icon-plus,
.rui-icon-minus {
  border-radius: 3px;
}

.rui-icon-plus::before {
  width: 90%;
  border-top: 2px solid;
}
.rui-icon-plus::after {
  height: 90%;
  border-left: 2px solid;
}

.rui-icon-minus::before {
  width: 90%;
  border-top: 2px solid;
}

.rui-icon-location::before {
  width: .8em;
  height: .8em;
  border: 1px solid;
  border-radius: 50% 50% 50% 0;
  -ms-transform: translate(-50%, -60%) rotate(-45deg);
  transform: translate(-50%, -60%) rotate(-45deg);
}

.rui-icon-location::after {
  width: .3em;
  height: .3em;
  border: 1px solid;
  border-radius: 50%;
  -ms-transform: translate(-50%, -.25em);
  transform: translate(-50%, -.25em);
}

.rui-icon-location-full::before {
  width: .8em;
  height: .8em;
  border: 1px solid;
  background-color: currentColor;
  border-radius: 50% 50% 50% 0;
  -ms-transform: translate(-50%, -60%) rotate(-45deg);
  transform: translate(-50%, -60%) rotate(-45deg);
}

.rui-icon-location-full::after {
  width: .3em;
  height: .3em;
  border: 1px solid #fff;
  background-color: #fff;
  border-radius: 50%;
  -ms-transform: translate(-50%, -.25em);
  transform: translate(-50%, -.25em);
}

@keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.rui-loading {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #fcb4b6;
  width: 50px;
  height: 50px;
  animation: load 2000ms linear infinite;
  position:absolute;
  top:0px;
  bottom:0px;
  right:0px;
  left:0px;
  margin:55% auto;
}